<template>
  <div style="width: 90%; margin: auto">
    <!-- 面包屑导航区域 -->

    <!-- 搜索与添加区域 -->
    <el-row :gutter="20" style="margin-bottom: 1rem">
      <el-col :span="8"
        ><el-input
          placeholder="请输入店铺名称"
          v-model="selectMsg.msg"
          clearable
          @clear="selectShopList()"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handSelect"
          ></el-button> </el-input></el-col
      ><el-col :span="4"> </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table
      :data="shoplist"
      stripe
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="id" label="id" width="50px"> </el-table-column>
      <el-table-column prop="merchantName" label="店铺名称"> </el-table-column>
      <el-table-column prop="levelId" label="店铺等级">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.levelId == 1">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.levelId == 2"
            >二级</el-tag
          >
          <el-tag type="info" v-else-if="scope.row.levelId == 3">三级</el-tag>
          <el-tag type="warning" v-else-if="scope.row.levelId == 4"
            >四级</el-tag
          >
          <el-tag type="danger" v-else-if="scope.row.levelId == 5">五级</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="remarks" label="备注"> </el-table-column>

      <el-table-column prop="isActived" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isActived"
            @change="userStatechanged(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="shopAddress" label="发货地址">
        <template slot-scope="scope">
          <el-select v-model="scope.row.shopAddress" placeholder="请选择">
            <el-option
              v-for="item in shoplist"
              :key="item.id"
              :label="item.shopAddress"
              :value="item.shopAddress"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createdTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130px">
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showEidtDialog(scope.$index, scope.row)"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="removeUserInfo(scope.$index, scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.pager.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="this.pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.pager.total"
    >
    </el-pagination>

    <!-- 编辑店铺对话框区域 -->
    <el-dialog
      title="修改店铺信息"
      :visible.sync="editDialogvisible"
      width="70%"
    >
      <!-- 内容主体区域 -->
      <span>
        <!-- 内容主体区域 -->
        <el-form
          :data="shoplist"
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="70px"
        >
          <!-- 店铺名 -->
          <el-form-item label="店铺名" prop="merchantName">
            <el-input v-model="editForm.merchantName"></el-input>
          </el-form-item>
          <!-- 备注 -->
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="editForm.remarks"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogvisible = false">取 消</el-button>
        <el-button type="primary" @click="editSave()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getShopList();
  },
  data() {
    return {
      value: "",
      // 搜索框内容
      selectMsg: {
        msg: "",
        currentPage: "",
        pageSize: "",
        total: "",
      },

      // 要操作的行
      currentIndex: 0,
      // 店铺列表
      shoplist: [],
      // 分页用到的数据
      pager: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      // 控制添加商铺对话框的显示和隐藏，默认为false
      addDialogvisible: false,
      // 添加店铺表单数据
      addForm: {
        shopname: "",
        remark: "",
      },
      // 添加店铺表单验证规则
      addFormRules: {
        shopname: [
          { required: true, message: "请输入店铺名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
      // 控制编辑店铺对话框的显示和隐藏，默认为false
      editDialogvisible: false,
      // 获取到的店铺信息
      editForm: {
        id: "",
        usersid: 1,
        levelId: "",
        merchantName: "",
        remarks: "",
      },
      // 修改店铺表单验证规则
      editFormRules: {
        shopname: [
          { required: true, message: "请输入店铺名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 店铺名查找店铺
    handSelect() {
      if (this.selectMsg.msg) {
        this.SelectShop(this.selectMsg);
      } else {
        this.getShopList();
      }
    },
    // 删除店铺
    async removeUserInfo(index, id) {
      // 弹框询问店铺是否确认删除店铺
      const confirmResult = await this.$confirm(
        "此操作将永久删除该店铺, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 取消
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      await this.$http.delete(`Merchant/${id}`);
      this.currentIndex = index;
      this.shoplist.splice(this.currentIndex, 1);
      this.getShopList();
    },
    // 获取店铺列表
    async getShopList() {
      const id = 1;
      const { data: res } = await this.$http.get(`Merchant/${id}`, {
        params: this.pager,
      });
      console.log(res);
      this.shoplist = res.data;
      this.pager.total = res.count;
    },
    // 监听 switch 开关状态变化的事件
    async userStatechanged(row) {
      console.log(row);
      const { data: res } = await this.$http.put("user/statu/", row);
      if (res.code !== 1000) {
        row.isActived = !row.isActived;
        return this.$message.error("更新店铺状态失败！");
      }
      return this.$message.success("更新店铺状态成功！");
    },
    // 查寻方法
    async SelectShop(params) {
      params.currentPage = this.pager.currentPage;
      params.pageSize = this.pager.pageSize;
      params.total = this.pager.total;
      const { data: res } = await this.$http.get("Merchant/select", {
        params: params,
      });
      if (res.data) {
        this.shoplist = res.data;
        this.pager.total = res.count;
      }
    },
    // 监听添加店铺对话框关闭的事件
    addDialogclosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 展示店铺编辑的对话框
    async showEidtDialog(index, row) {
      this.currentIndex = index;
      console.log(row);
      this.editDialogvisible = true;
      this.editForm.id = row.id;
      this.editForm.merchantName = row.merchantName;
      this.editForm.remarks = row.remarks;
      this.editForm.levelId = row.levelId + "";
    },
    // 保存编辑店铺
    async editSave() {
      this.editDialogvisible = false;
      this.editForm.id = parseInt(this.editForm.id);
      this.editForm.levelId = parseInt(this.editForm.levelId);
      this.EidtShop(this.editForm, this.editForm.id);
    },
    // 编辑店铺方法
    async EidtShop(data, id) {
      const { data: res } = await this.$http.put(`Merchant/${id}`, data);
      console.log(res);
      this.getShopList();
    },
    // 监听修改店铺对话框关闭事件
    editDialogclosed() {
      this.$refs.editFormRef.resetFields();
    },
    handleSizeChange(newSize) {
      // pagesize改变触发
      this.pager.pageSize = newSize;
      this.getShopList();
    },
    handleCurrentChange(newPage) {
      // 页码改变触发
      this.pager.currentPage = newPage;
      this.getShopList();
    },
    // 清空搜索框重新获取数据
    selectShopList() {
      this.getShopList();
    },
  },
};
</script>

<style scoped></style>
